<script setup lang="ts">
// 引用其他vue对象文件
// import DeviceCheck from "./components/DeviceCheck.vue";
import { onBeforeUnmount, onMounted, onUpdated, ref } from "vue";

// 导入路由
import { useRoute, useRouter } from "vue-router";
import { ElButton } from "element-plus";
import { useStore } from "@/storage/cache";
const router = useRouter();
const route = useRoute();
//------------------------------
// 引用store
const store = useStore();
store.userInfo = { id: "0001973" };
//------------------------------

const isLoading = ref(true);

onMounted(() => {
  console.log(
    "生命周期--onMounted(App.vue)" +
      route.path +
      "<-->" +
      route.fullPath +
      "<-->"
  );
  window.addEventListener("resize", resizeListener);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeListener);
});

onUpdated(() => {
  console.log(
    "生命周期--onUpdated(App.vue)" +
      route.path +
      "<-->" +
      route.fullPath +
      "<-->"
  );
});

function resizeListener() {
  console.log(
    "生命周期--resizeListener(App.vue)" +
      route.path +
      "<-->" +
      route.fullPath +
      "<-->"
  );
}

// 参考 https://cloud.tencent.com/developer/article/2340524 下方的路由跳转
async function toPage2() {
  console.log("前<-->" + route.path + "<-->" + route.fullPath + "<-->");
  const failure = await router.push("/home");
  console.log("后<-->" + route.path + "<-->" + route.fullPath + "<-->");
}
</script>
<!-- template 加载前，隐藏内容 -->
<template>
  <div class="app-root">
    <el-button
      class="app-button"
      type="primary"
      :loading="isLoading"
      @click="toPage2"
      >path: {{ $route.fullPath }}</el-button
    >
    <el-input></el-input>
  </div>
</template>

<style scoped>
.app-root {
  width: 100vw;
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.app-button {
  width: 160px;
  height: 36px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
}
</style>
